<template>
  <h1>1.组件的基本写法</h1>
  <button @click="addCount">修改count的值{{ count }}</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "About",
});
</script>

<script lang="ts" setup>
import {ref,watch} from "vue";
/* 
  watch监视一个基本类型响应数据（ref）
  -wacth的参数
   参数1:被监视的属性
   参数2：回调函数，接受两个参数分别是newVal和oldVal
   参数3：配置对象深度监听：immediate: true
*/
  let count = ref(0);
  const addCount = ()=>{
    count.value++;
  };
  // 监视count
  watch(
    count,
    (newVal,oldVal)=>{
      console.log("count的监听",newVal,oldVal);
    },
    // 这样写是深度监听
    {immediate:true}
  );

</script>

<style scoped></style>
